<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <link  rel="stylesheet" href="/static/ccu.css">
</head>
<body>
<div id="app">
    <div>
        <input id="num" placeholder="请输入班级人数" />
        <input id="name" placeholder="请输入班级" />
        <input id="dep" placeholder="请输入学院" />
        <button onclick="insert()" >插入学生信息</button>
    </div>
    <div>
        <input id="searchName" th:value="${bbb}" placeholder="请输入模糊查询学生姓名" />
        <input id="dep1" placeholder="根据学院查询" />
        <button onclick="getList()">查询</button>
    </div>
    <div>
        <div style="display: flex;flex-direction: row;">
            <div style="width: 100px;" class="ee">ID</div>
            <div style="width: 100px;" class="ee">人数</div>
            <div style="width: 100px;" class="ee">班级</div>
            <div style="width: 100px;" class="ee">学院</div>
        </div>
        <div th:each="item :${gg}" style="display: flex;flex-direction: row;" class="rr">
            <div style="width: 100px;" th:text="${item.id}"></div>
            <div style="width: 100px;" th:text="${item.num}" ></div>
            <input style="width: 80px;" th:value="${item.name}" th:id="${item.id}"></input>
            <div style="width: 100px;" th:text="${item.dep}"></div>
            <button th:onclick="|updates(${item.id})|">更新</button>
            <button th:onclick="|deletes(${item.id})|">删除</button>
        </div>
    </div>
    <div class="a">
        <img src="/static/ff.jpg" width="500px" height="400px">
    </div>

</div>
<script>
    function deletes(id) {
        axios
            .get('http://localhost:8080/deleteJpa1?id=' + id)
            .then(response => {
                alert(response.data)
                //删除完成后刷新列表
                window.location.reload()
            })
    }
    function updates(id) {
        axios
            .get('http://localhost:8080/updateJpa13?id=' + id+'&name='+document.getElementById(id).value)
            .then(response => {
                alert(response.data)
                //更新完成后刷新列表
                this.getList()
            })
    }
    function insert(){
        var num= document.getElementById("num").value;
        var name= document.getElementById("name").value;
        var dep=document.getElementById("dep").value;
        axios
            .get('http://localhost:8080/insertJpa13?num='+num+'&name='+name+'&dep='+dep)
            .then(response => {
                alert(response.data)
                //更新完成后刷新列表
                window.location.reload()
            })
    }
    function getList(){
        var searchName= document.getElementById("searchName").value;
        var dep= document.getElementById("dep1").value;
        window.location.href="http://localhost:8080/toLogninPage51?name="+searchName+'&dep='+dep;
    }
</script>
</body>
</html>